import { Card, Table, Tag } from 'antd'
import React, { useEffect, useState } from 'react'
import PageBreadcrumb from '../../components/PageBreadcrumb'
import { getRights } from "../../api/rights"

const RightsList = () => {
  const levelTag = (level) => {
    let color = ''
    let label = ''
    if (level === '0') {
      color = 'blue'
      label = '一级'
    } else if (level === '1') {
      color = 'green'
      label = '二级'
    } else {
      color = 'orange'
      label = '三级'
    }
    return <Tag color={color}>{label}</Tag>
  }

  const columns = [
    {
      title: '权限名称',
      dataIndex: 'authName',
      key: 'authName',
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '权限等级',
      key: 'level',
      dataIndex: 'level',
      render: (level) => (
        <>
          {levelTag(level)}
        </>

      ),
    },
  ];
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    getListData()
  }, [])


  // 查询列表
  const getListData = async () => {
    setLoading(true)
    const data = await getRights().finally(() => {
      setLoading(false)
    });
    setData(data)
  };

  return (
    <>
      <PageBreadcrumb>
        <span>权限管理</span>
        <span>权限列表</span>
      </PageBreadcrumb>

      <Card>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
        />
      </Card>
    </>
  )
}

export default RightsList